<template>
	<div v-loading="data.mtloading">
		<el-table :data="data.langlist" :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }" class="w-full">

			<el-table-column prop="lang" :label="$t('machine.configs.langCode')">
				<template #default="scope">
					{{ scope.row.lang || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="name" :label="$t('machine.types.country')">
				<template #default="scope">
					{{ scope.row.name || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="g_name" :label="$t('machine.goods.name')">
				<template #default="scope">
					{{ scope.row.g_name || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="gc_name" :label="$t('machine.goods.class')">
				<template #default="scope">
					{{ scope.row.gc_name || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="manufacturer" :label="$t('machine.goods.commodity')">
				<template #default="scope">
					{{ scope.row.manufacturer || '--' }}
				</template>
			</el-table-column>

			<el-table-column prop="g_name" :label="$t('public.operate')">
				<template #default="scope">
					<el-button type="primary" size="small" @click="edit(scope.row)"><el-icon>
							<EditPen />
						</el-icon></el-button>
					<el-button v-if="scope.row.gl_id != undefined" type="danger" size="small"
						@click="del(scope.row.gl_id)"><el-icon>
							<Delete />
						</el-icon></el-button>
				</template>
			</el-table-column>

		</el-table>

		<el-dialog v-model="data.dialogVisible" :title="$t('machine.goods.lang')" center width="50%"
			style="margin-top: 80px;">
			<el-form v-if="data.dialogVisible" :model="data.objlang" :rules="data.rules" class="w-full flex flex-wrap"
			:label-width="language == 'en' ? '187px' : '100px'" ref="ruleFormRef">

				<div class="w-1/2">
					<el-form-item :label="$t('machine.configs.langCode') + ':'" prop="lang">
						<el-input v-model="data.objlang.lang" :placeholder="$t('message.pleaseEnter')" readonly />
					</el-form-item>
				</div>

				<div class="w-1/2">
					<el-form-item :label="$t('machine.types.country') + ':'" prop="name">
						<el-input v-model="data.objlang.name" :placeholder="$t('message.pleaseEnter')" readonly />
					</el-form-item>
				</div>

				<div class="w-1/2">
					<el-form-item :label="$t('machine.goods.name') + ':'" prop="g_name">
						<el-input v-model="data.objlang.g_name" :placeholder="$t('message.pleaseEnter')" />
					</el-form-item>
				</div>

				<div class="w-1/2">
					<el-form-item :label="$t('goods.types.name') + ':'" prop="gc_name">
						<el-input v-model="data.objlang.gc_name" :placeholder="$t('message.pleaseEnter')" />
					</el-form-item>
				</div>

				<div class="w-1/2">
					<el-form-item :label="$t('goods.groupM.param') + ':'" prop="formanceID">
						<el-select v-model="data.objlang.formanceID" :placeholder="$t('message.pleaseSelect')" clearable
							filterable multiple>
							<el-option v-for="item in formance" :key="item.cp_id" :label="item.cp_id + '-' + item.name"
								:value="item.cp_id" />
						</el-select>
					</el-form-item>
				</div>

				<div class="w-1/2">
					<el-form-item :label="$t('goods.groupM.manufacturer')+':'" prop="manufacturer">
						<el-input v-model="data.objlang.manufacturer" :placeholder="$t('message.pleaseEnter')" />
					</el-form-item>
				</div>

				<div class="w-full">
					<el-form-item :label="$t('goods.list.desc') + ':'" prop="desc">
						<Editor v-model="data.objlang.desc" />
					</el-form-item>
				</div>

				<div class="w-full text-center">
					<div class="inline-block">

						<el-button type="primary" size="small" @click="submit(ruleFormRef)">
							{{ $t('public.save') }}
						</el-button>

						<el-button size="small" @click="data.dialogVisible = false">
							{{ $t('public.cancel') }}
						</el-button>
					</div>
				</div>


			</el-form>
		</el-dialog>


	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Editor from '@/components/Editor/index.vue';
import { getgoodslang, addgoodslang, updategoodslang, delgoodslang } from '@/api/goods';
import {onMounted} from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
let props = defineProps({
	info: {
		// 商品信息
		type: Object,
		default: {}
	},
	lang: {
		// 语言列表
		type: Array,
		default: []
	},
	formance: {
		// 性能信息
		type: Array,
		default: []
	}
})

let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	rules: { // 表单验证
		g_name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		gc_name: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		formanceID: { required: true, message: $t('message.pleaseSelect'), trigger: 'change' },
		manufacturer: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
	},
	langlist: [],// 列表信息
	objlang: {}, // 选中的语言

})

// 获取列表信息
let setlang = () => {
	data.mtloading = true
	let info = props.info

	data.langlist = []
	for (let item of props.lang) {
		data.langlist.push({
			name: item.name,
			lang: item.lang,
			g_id: info.g_id,
			g_name: '',
			gc_id: info.gc_id,
			gc_name: '',
			manufacturer: '',
			desc: '',
			performance: info.performance,
			formanceID: []
		})
	}

	getgoodslang({ g_id: info.g_id }).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data) {
				for (let ime of data.langlist) {
					if (item.lang == ime.lang) {
						ime.gl_id = item.gl_id
						ime.g_name = item.g_name
						ime.gc_name = item.gc_name
						ime.manufacturer = item.manufacturer
						ime.desc = item.desc
						ime.performance = item.performance
						let performance = JSON.parse(item.performance)
						ime.formanceID = []
						for (let item of performance) {
							ime.formanceID.push(item.cp_id)
						}
					}
				}
			}
			console.log(res.data)
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 添加、修改列表信息
let edit = (e) => {
	data.dialogVisible = true
	data.objlang = e
	console.log(e)
	data.objlang = {
		desc: e.desc,
		formanceID: e.formanceID,
		g_id: e.g_id,
		g_name: e.g_name,
		gc_id: e.gc_id,
		gc_name: e.gc_name,
		lang: e.lang,
		manufacturer: e.manufacturer,
		name: e.name,
		performance: e.performance
	}
	if (e.gl_id != undefined) {
		data.objlang.gl_id = e.gl_id
	}
}

// 提交数据
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			let arr = []
			for (let item of data.objlang.formanceID) {
				for (let ime of props.formance) {
					if (item == ime.cp_id) {
						arr.push(ime)
					}
				}
			}

			let info = {
				lang: data.objlang.lang,
				g_id: data.objlang.g_id,
				g_name: data.objlang.g_name,
				gc_id: data.objlang.gc_id,
				gc_name: data.objlang.gc_name,
				manufacturer: data.objlang.manufacturer,
				desc: data.objlang.desc,
				performance: JSON.stringify(arr)
			}

			if (data.objlang.gl_id == undefined || data.objlang.gl_id == '') {
				// 添加语言
				addgoodslang(info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.addSuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						setlang()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			} else {
				// 修改语言
				info.gl_id = data.objlang.gl_id
				updategoodslang(info).then(res => {
					if (res.state == 200) {
						ElMessage({
							message: $t('message.modifySuccess'),
							type: 'success'
						})
						data.dialogVisible = false
						setlang()
						return
					}
					ElMessage({
						message: $t('message.networkFailed'),
						type: 'error'
					})
				})
			}

		}
	})
}

// 删除语言
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			delgoodslang({ gl_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					setlang()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})

}

setlang()

</script>
